<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>天目湖导游考勤系统</title>
</head>
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
<link rel="stylesheet" href="/static/css/weui.min.css">
<script src="/static/js/zepto.min.js"></script>
<style>
    .new-bg {
        height: 5.3rem;
        background-image: url("/static/img/bg.png");
        background-size: 100% 100%;
    }

    .title {
        height: 0.53rem;
        line-height: 0.53rem;
        margin-top: 0.3rem;
        margin-left: 0.4rem;
        font-size: 0.48rem;
        color: #333333;
    }

    .time {
        line-height: 0.53rem;
        margin-top: 0.2rem;
        margin-left: 0.4rem;
        font-size: 0.37rem;
        color: #666666;
    }

    .new-btn {
        margin: 10% auto 0;
        height: 2.6rem;
        width: 9.2rem;
        background-color: #ffffff;
        box-shadow: 0 0.053rem 0.267rem 0 rgba(0, 0, 0, 0.05);
        border-radius: 0.267rem;
    }

    .btn-text {
        font-size: 0.667rem;
        color: #333333;
    }

</style>
<body style="background: #fafafa;height: 100%">
<div id="loadingToast" style="display:none;">
    <div class="weui-mask_transparent"></div>
    <div class="weui-toast">
        <i class="weui-loading weui-icon_toast"></i>
        <p class="weui-toast__content">努力签到中</p>
    </div>
</div>
<div id="success_dialog" style="display: none;">
    <div class="weui-mask"></div>
    <div class="weui-dialog" style="border-radius: 0.133rem;">
        <div class="weui-dialog__hd">
            <img src="/static/img/success.png" width="134px" height="110px">
        </div>
        <div class="weui-dialog__hd"><strong class="weui-dialog__title">签到成功</strong></div>
        <div class="weui-dialog__bd" id="success_msg"></div>
        <div class="weui-dialog__ft">
            <a href="javascript:;" onclick="hideDialog()" class="weui-dialog__btn weui-dialog__btn_primary">知道了</a>
        </div>
    </div>
</div>
<div id="fail_dialog" style="display: none;">
    <div class="weui-mask"></div>
    <div class="weui-dialog" style="border-radius: 0.133rem;">
        <div class="weui-dialog__hd">
            <img src="/static/img/fail.png" width="134px" height="110px">
        </div>
        <div class="weui-dialog__hd"><strong class="weui-dialog__title">签到失败</strong></div>
        <div class="weui-dialog__bd" id="fail_msg"></div>
        <div class="weui-dialog__ft">
            <a href="javascript:;" onclick="hideDialog()" class="weui-dialog__btn weui-dialog__btn_primary">知道了</a>
        </div>
    </div>
</div>
<div class="container">
    <div class="weui-flex new-bg" style=" flex-direction: column">
        <div class="title">天目湖导游考勤系统</div>
        <div class="time" id="time"></div>
    </div>
    <div class="weui-flex new-btn" style="justify-content:center;align-items:center;" onclick="buildTeam()">
        <img src="/static/img/ic_build.png" style="width:  0.8rem;height: 0.8rem;margin-right: 0.4rem">
        <div class="btn-text">建团</div>
    </div>
    <div class="weui-flex new-btn" style="justify-content:center;align-items:center;" onclick="attend()">
        <img src="/static/img/ic_attend.png" style="width:  0.8rem;height: 0.8rem;margin-right: 0.4rem">
        <div class="btn-text">签到</div>
    </div>

</div>
</body>
<script>
  function hideDialog() {
    $("#success_dialog").css("display", "none");
    $("#fail_dialog").css("display", "none");
  }

  function showSuccess(msg) {
    hideToast();
    $("#success_dialog").css("display", "block");
    $("#success_msg").html(msg);
  }

  function showFail(msg) {
    hideToast();
    $("#fail_dialog").css("display", "block");
    $("#fail_msg").html(msg);
  }

  function buildTeam() {
    window.location.href = "./build" + '?openid=' + openid;
  }

  function attend() {
    showToast();
    scanBlueTooth();
  }

  var scanTime = 0;
  var beaconsNew = [];

  function scanBlueTooth() {
    if (!wxParamObj) {
      showFail('无法获取公众号参数');
      return
    }
    scanTime = 0;
    beaconsNew = [];
    wx.config({
      beta: true,
      debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: wxParamObj.appId, // 必填，公众号的唯一标识
      timestamp: wxParamObj.timestamp, // 必填，生成签名的时间戳
      nonceStr: wxParamObj.nonceStr, // 必填，生成签名的随机串
      signature: wxParamObj.signature,// 必填，签名，见附录1
      jsApiList: ["startSearchBeacons", "onSearchBeacons", "stopSearchBeacons"]
    });

    wx.ready(function () {
      wx.startSearchBeacons({
        ticket: "",
        fail: function (data) {
          wx.stopSearchBeacons({
            complete: function (res) {
            }
          });
          showFail("请先开启蓝牙后重试");
        },success:function (res) {
          setTimeout("endScan();", 5000);
        }

      });
      wx.onSearchBeacons({
        success:function (res) {
        },
        complete: function (argv) {
          var beacons = argv.beacons;
          for (var i = 0; i < beacons.length; i++) {
            if (beacons[i].rssi != '0') {
              beaconsNew.push({
                "major": beacons[i].major,
                "minor": beacons[i].minor,
                "rssi": beacons[i].rssi
              })
            }
          }
        }
      });
    });

    wx.error(function (res) {
      showFail('无法获取公众号参数初始化错误');
    });
  }

  function endScan() {
    wx.stopSearchBeacons({
      complete: function (res) {
      }
    });

    if (beaconsNew.length !== 0) {
      var argv={};
      argv.open_id = openid;
      argv.beacons = beaconsNew;
      callBackInterface(JSON.stringify(argv));
    } else {
      showFail("未扫描到签到点，请靠近签到点重试");
    }
  }

  function hideToast() {
    $("#loadingToast").css("display", "none");
  }

  function showToast() {
    $("#loadingToast").css("display", "block");
  }

  function showTime() {
    var show_day = new Array('星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日');
    var time = new Date();
    var year = time.getYear();
    var month = time.getMonth();
    var date = time.getDate();
    var day = time.getDay();
    var hour = time.getHours();
    var minutes = time.getMinutes();
    var second = time.getSeconds();
    month < 10 ? month = '0' + month : month;
    month = month + 1;
    hour < 10 ? hour = '0' + hour : hour;
    minutes < 10 ? minutes = '0' + minutes : minutes;
    var now_time = month + '月' + date + '日' + ' ' + show_day[day - 1] + ' ' + hour + ':' + minutes;
    document.getElementById('time').innerHTML = now_time;
    setTimeout("showTime();", 3000); //动态调取时间
  }

  // 获取URL参数 e.g. map.html?sid=122134
  function getUrlParam(s, name) {
    var reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)", "i");
    if (reg.test(s))
      return unescape(RegExp.$2.replace(/\+/g, " "));
    return "";
  }

  var openid = '';
  var wxParamObj;
  $(function () {
    hideDialog();
    showTime();
    var url = "http://map.tdlbs.com:8088/TDWX/Access?url=" + encodeURIComponent(encodeURIComponent(window.location.href));
    openid = getUrlParam(location.href, "openid");
    $.ajax({
      type: "GET",
      url: url,
      async: false,
      dataType: 'jsonp',
      jsonp: 'callback', //传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
      jsonpCallback: 'successCallback',
      success: function (obj) {
        wxParamObj = obj;
      }, error: function (xhr) {
        alert("无法获取微信openid，请重新打开页面")
      }
    });

  });

  function callBackInterface(argv) {
    $.get("/weixin/sign?data=" + argv, function (response) {
      if (response.errno == 0) {
        showSuccess(response.errmsg);
      } else {
        showFail(response.errmsg);
      }
    })
  }

</script>

</html>